{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main-page</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="{% static 'css/main-page.css' %}">

</head>
<body>
    
<!-- header section starts  -->

<!-- 导航栏 -->
<header class="header">

    <a href="#" class="logo"> <i class="fa-solid fa-heart"></i> 视讯智疗 </a>

    <nav class="navbar">
        <a href="#home">首页</a>
        <a href="">视频通话</a>
        <a href="">心理自测</a>
        <a href="">治愈游戏</a>
        <a href="">心理树洞</a>
    </nav>

    <div class="icons">
        <a href="#" class="fa-solid fa-calendar-days"></a>
        <div class="user-menu">
            <a href="#" class="fas fa-user" id="user-icon"></a>
            <div class="dropdown-menu" id="dropdown-menu">
                <a href="/personalcenter/">个人信息</a>
                <a href="/login/">退出</a>
            </div>
        </div>
        <button class="login-out-btn" onclick="window.location.href='login-registeration.html';">登录</button>
    </div>

</header>


<section class="home" id="home">

    <div class="content">
        <h3> <span>hi</span> 欢迎来到视讯智疗 </h3>
        <a href="#about" class="btn">了解更多</a>
    </div>

    <img src="{% static 'img/bottom_wave.png' %}" class="wave" alt="">

</section>

<section class="about" id="about">

    <h1 class="heading "> <span>视讯智疗</span>：你的智能情绪陪伴助手</h1>
    <div class="about-container">
        <div class="image">
            <img src= "{% static 'img/简介.webp' %}" alt="">
        </div>
    
        <div class="content">
            <h3>你的情绪，AI暖心对待</h3>
            <p>视讯智疗利用人工智能与心理学相结合，打造一个完全个性化、智能化的情绪自助平台，为你提供温暖、安全的心理陪伴空间，让AI守护你的每一份情绪！</p>
            <a href="#services" class="btn">功能介绍</a>
        </div>
    </div>
    

</section>

<section class="services" id="services">
<h1 class="heading"> 我们的<span>功能</span></h1>
<div class="video-call">

    <div class="image">
        <img src="{% static 'img/video.png' %}" alt="">
    </div>

    <div class="content">
        <h3>视频通话</h3>
        <p>与专属Q版角色视频对话，选择您喜爱的音色与形象，在轻松的氛围中倾诉心声。我们会根据您的情绪状态，动态调整对话内容，提供即时的心理安抚与实用建议。</p>
        <div class="tips">虚拟朋友，随时陪你聊 <</div>
        <a href="#"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
    </div>

</div>

<div class="self-test">

    <div class="content">
        <h3>心理自测</h3>
        <p>通过科学设计的心理测试题，快速评估你的压力指数和情绪状态，题目会根据你的回答智能调整，像聊天一样自然，告别枯燥问卷，生成易懂的“心理晴雨表”。</p>
        <div class="tips">> 5分钟了解真实的自己</div>
        <a href="#"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
    </div>

    <div class="image">
        <img src="{% static "img/test1.png" %}" alt="">
    </div>

</div>

<div class="healing-game">

    <div class="image">
        <img src="{% static "img/healing-game.png" %}" alt="">
    </div>

    <div class="content">
        <h3>治愈游戏</h3>
        <p>内置心理小游戏与电子琴互动，零基础也能弹！跟着轻快的旋律轻触琴键，用音乐编织专属的放松时刻，烦恼像泡泡一样被戳破！</p>
        <div class="tips">手指动一动，压力退退退 <</div>
        <a href="#"> <img src="{% static "img/heart2.png"%}" alt=""> </a>
    </div>

</div>

<div class="tree-hole">

    <div class="content">
        <h3>心理树洞</h3>
        <p>随手记录开心、委屈和迷茫，连AI也不会偷看.自动标记每条记录的心情标签，生成月度情绪曲线图，见证你的成长轨迹。</p>
        <div class="tips">> 这里只有你和月光</div>
        <a href="#"> <img src="{% static "img/heart2.png" %}" alt=""> </a>
    </div>

    <div class="image">
        <img src="{% static "img/tree-hole.png" %}" alt="">
    </div>

</div>
</section>



<section class="footer">

    <img src="{% static "img/top_wave.png" %}" alt="">

    <div class="contact">联系我们：</div>

    <div class="credit"> © 2025 视讯智疗. created by <span> 心语 </span> | all rights reserved! </div>

</section>

<script src="{% static "js/main-page.js" %}"></script>

</body>
</html>